<template>
  <div class="sjplatformSelectForm">
    <el-form :inline="true">
      <el-form-item label="权限名称：">
        <el-input v-model="authorityTable.queryCondition.authorityName" placeholder="请输入权限名称..." />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="openEditForm('add', null)">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="sjplatformtable">
    <el-table :data="authorityTable.tableData" v-loading="loading" stripe border style="width: 100%">
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ $index + 1 + (currentPage - 1) * pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="authorityName" label="名称">
        <template #default="{ row }">
          <el-tooltip class="item" effect="light" :content="row.authorityName" placement="top">
            <span>{{ row.authorityName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="pName" label="上级权限">
        <template #default="{ row }">
          <el-tooltip class="item" effect="light" :content="row.pName" placement="top">
            <span>{{ row.pName }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="authorityType" label="类型" width="80">
        <template #default="{ row }">
          <span>{{ row.authorityType === 1 ? "菜单" : "按钮" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template #default="{ row }">
          <el-tooltip content="修改" placement="bottom" effect="light">
            <i class="edit-icon" @click="openEditForm('edit', row)"></i>
          </el-tooltip>
          <el-tooltip content="删除" placement="bottom" effect="light">
            <i class="del-icon" @click="handleDelete(row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="authorityTable.total" :page-size="pageSize"
      :current-page="currentPage" @current-change="handleCurrentChange" />
  </div>
  <el-dialog v-model="newAuthorityTableVisible" :title="formTitle" width="50%" draggable>
    <AuthorityAddOrUpdate />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="operateAuthority">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import AuthorityAddOrUpdate from "./AuthorityAddOrUpdate.vue";
import { useAuthorityTable } from "../../../hooks/SystemManager/Authority/useAuthorityTable";
import commonUtil from "../../../utils/common";

const currentPage = ref(1);
const pageSize = ref(10); // 默认每页大小
const formTitle = ref("新增权限");
const loading = ref(false);

const newAuthorityTableVisible = ref(false); //新增权限窗口
const addOrUpdate = ref("add"); //新增还是修改

// 使用数据处理 Hook
const {
  authorityTable,
  authorityStore,
  queryData,
  addData,
  updateData,
  deleteData,
} = useAuthorityTable(currentPage, pageSize);
queryData();

watch(
  () => authorityStore.selectedAuthorityNode?.id,
  (newId) => {
    authorityTable.queryCondition.id = newId;
    searchData();
  }
);
//翻页事件
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  queryData(); // 根据当前页获取数据
};
//打开编辑窗口
const openEditForm = (value, data) => {
  addOrUpdate.value = value;
  if (value == "add") {
    formTitle.value = "新增权限";
    authorityStore.resetAuthorityModel();
  }
  if (value == "edit") {
    formTitle.value = "修改权限";
    authorityStore.authorityModel = data;
    // console.log(authorityStore.authorityModel);
  }
  newAuthorityTableVisible.value = true;
};
//新增或修改
const operateAuthority = async () => {
  if (addOrUpdate.value == "add") {
    if (await addData()) {
      commonUtil.Methods.ShowMessage("success", "新增权限成功！");
      newAuthorityTableVisible.value = !newAuthorityTableVisible.value;
    } else {
      commonUtil.Methods.ShowMessage("Oops", "新增权限失败！");
    }
  }
  if (addOrUpdate.value == "edit") {
    if (await updateData()) {
      commonUtil.Methods.ShowMessage("success", "修改权限成功！");
      newAuthorityTableVisible.value = !newAuthorityTableVisible.value;
    } else {
      commonUtil.Methods.ShowMessage("Oops", "修改权限失败！");
    }
  }
  searchData();
};
//删除
const handleDelete = async (data) => {
  if (await deleteData(data.id)) {
    commonUtil.Methods.ShowMessage("success", "删除权限成功！");
    searchData();
  } else {
    commonUtil.Methods.ShowMessage("Oops", "删除权限失败！");
  }
};
//重置按钮
const reset = () => {
  authorityStore.resetAuthorityModel();
};
const cancel = () => {
  newAuthorityTableVisible.value = !newAuthorityTableVisible.value;
};
//查询按钮
const searchData = () => {
  loading.value = true;
  currentPage.value = 1;
  queryData();
  loading.value = false;
};
</script>